<template>
  <div>
    <!-- <van-tree-select  :items="items" :main-active-index.sync="active" height='calc(100vh - 52px)' @click-nav="onclick">
      <template #content>
          <van-grid :column-num="3">
            <van-grid-item v-for="(item,index) in itemsid" :key="index" icon="" text="文字" />
          </van-grid>
      </template>
    </van-tree-select> -->

    <div class="sidebar">
      <van-sidebar v-model="activeKey">
        <div v-for="(item,index) in ListName" :key="index">
          <van-sidebar-item :title="item.name" @click="click(item.id)" />
        </div>
      </van-sidebar>
    </div>
    <div class="grid">
      <van-grid class="item" :border="false" :column-num="3">

        <div class="grid-text" v-for="(item,index) in speciesOptions" :key="index">

          <van-grid-item @click="gotolink(item.id)">
            <van-image :src="item.wap_banner_url" width="50px" height="50px" />
          </van-grid-item>
          <div class="grid-text-a">
            <a>{{ item.name }}</a>
          </div>

        </div>
      </van-grid>
    </div>
  </div>
</template>

<script>
  import {
    GetListData,
    GetListidData
  } from '@/request/api'
  export default {
    data() {
      return {
        active: 0,
        ListName: [],
        activeKey: 0,
        speciesOptions: []

      }
    },

    created() {
      this.categoryList();
      this.click(1005000);


    },
    /* computed:{
      items:function(){
        console.log(this.ListName)
          if(this.ListName.categoryList ==undefined){
            return [];
          }else{
            let arr = [];
            this.ListName.categoryList.forEach((item)=>{
              item.text = item.name;
              arr.push(item);
            })
            return arr;
          }
        },
        itemsid:function(){
          if(this.items.length!=0){
            let Listuser = []
           let tid =this.items[this.activeindex].id;
            console.log(tid);
             GetListidData({
              id:tid
            }).then(res =>{
               if(res.errno ==0){
                 console.log(res.data)
                   this.Listuser = res.data.currentCategory.subCategoryList;
               }
            })
            console.log(this.Listuser)
             return this.Listuser;
          }else{
             return []
          }

        }

    },
    */
    methods: {
      //列表
      categoryList() {
        GetListData().then(res => {
          if (res.errno == 0) {
            this.ListName = res.data.categoryList;
            console.log(this.ListName)
          }
        })
      },
      click(index) {
        console.log(index);
        GetListidData({
          id: index
        }).then(res => {
          if (res.errno == 0) {
            console.log(res.data)
            this.speciesOptions = res.data.currentCategory.subCategoryList;
          }
        })

      },
      gotolink(id){
        this.$router.push({path:'/categoryList',query:{id}});
      }

    }
  }
</script>

<style scoped>
  .item{
    justify-content: space-around;
  }
  .sidebar {
    width: 80px;
    float: left;
  }
  .grid {
    margin-left: 90px;
    height: 100%;
  }

  .van-grid-item {
    height: 76px;

  }

  .grid-text {
    margin: 5px;
  }

  .grid-text-a {
    color: #999999;
    text-align: center;
    width: 70px;
  }
</style>
